<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;padding: 0px;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        body{
            background: #fafafc;
        }
        .ss{
          display: flex;position: fixed;
          width: 100%;height: 44px;background: linear-gradient(rgb(100, 124, 138),rgba(0,0,0,0));
          margin-top: 10px;
        }
        .kuang{
            position: relative;height: 26px;line-height: 24px;
            border: 1px solid #ccc;flex:1;font-size: 12px;color: #666;margin-left: 10px;
            padding-left: 30px;border-radius: 15px; 
            background-color: #fff;
            margin-top: 8px;font-size: 15px;
        }
        .kuang::before{
            content: "";position: absolute;top: 5px;left: 5px;
            width: 15px;height: 15px;background: url(./img/搜索.png);
            background-size: 21px auto;margin-left: 5px;
        }
        .wode{
            width: 44px;height: 44px;font-size: 12px;
            text-align: center;color: #fafafa;margin-right: 10px;
        }
        .wode::before{
            content: "";display: block;width: 22px;height: 22px;
            margin-left: 10px;margin-top: 5px;
            background: url(./img/搜索.png) 1px -36px no-repeat;background-size: 21px auto;
        }
        .bj{
          margin-top: -10px;
        }
        .bj img{
            width: 100%;
        }
        .sdh{
            margin-top: -55px;position: relative;
        }
        .jd{
            width: 90%;
            height: 64px;
            background-color: #fff;
            margin: 0 auto;
            margin-bottom: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
            
        }
        .jd li{
            flex: 20%;
        }
        .jd li a{
            display: flex;flex-direction: column;
            align-items: center;font-size: 12px;color: #222;
            
        }
        .jd li span:first-child{
            width: 40px;height: 40px;display: block;
            background: url(./img/景点.png)no-repeat;
            background-size: 40px auto;
        }
        .jd li a .mp{
            background-position: 0 -40px;
        }
        .jd li a .m{
            background-position: 0 -80px;
        }
        .jd li a .z{
            background-position: 0 -120px;
        }
        .jd li a .y{
            background-position: 0 -160px;
        }
        .gj{
          width: 90%;height: 197.56;margin: 0 auto;
        }
        .heng{
            width: 100%;
            height: 66.19px;
            display: flex;
            border-bottom:1px solid #fff ;
        }
        .dian{
            text-align: center;
            line-height: 66.19px;
            flex: 23%;
            border-right:1px solid #fff ;
            box-sizing: border-box;
        }
        .a .dian:last-child{
        border: none;
        }
        .heng .dian:first-child{
        flex: 31%;
        }
        .gj a{
        text-decoration: none;color: #fff;
        }
        .a{
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        background: linear-gradient(to right,#fa5956,#fb8650 54%)
        }
        .a .dian:first-child{
        background: url(./img/酒店.png) no-repeat right bottom;
        background-size: 73px auto;
        border-top-left-radius: 8px;
        }
        .a .dian:nth-child(2){
        background: url(./img/民宿.png) no-repeat left bottom;
        background-size: 37px auto;
        }
        .a .dian:last-child{
        flex: 46%;background: linear-gradient(to right,#ffbc49,#ffd252);
        border-top-right-radius: 8px;
        }
        .a .dian:last-child a{
        display: block;
        background: url(./img/特价.png)no-repeat right bottom ;
        background-size: 161px auto;
        }
        .a .dian:last-child{
        color: #a05416;
        }
        .heng .dian:first-child{
        text-align: left;
        padding-left: 10px;
        box-sizing: border-box;
        }
        .b{
        background: linear-gradient(to right,#4b8fed,#53bced);
        }
        .b .dian:first-child{
        background: url(./img/机票.png) no-repeat right bottom;
        background-size: 79px auto;
        }
        .b .dian:nth-child(2){
        background: url(./img/火车票.png) no-repeat left bottom;
        background-size: 37px auto;
        }
        .c{
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        background: linear-gradient(to right,#34c2aa,#6cd557);
        }
        .c .dian:first-child{
        background: url(./img/旅游.png) no-repeat right bottom;
        background-size: 94px auto;
        }
        .c .dian:nth-child(2){
        background: url(./img/私家团.png) no-repeat left bottom;
        background-size: 61px auto;
        }
        .gj2{
            width: 90%;
            margin: 10px auto;
            height: 110.06px;
            display: flex;
            flex-wrap: wrap;
        }
        .gj2 a{
            color: #222;
            font-size: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .gj2 li{
            flex: 20%;
        }
        .gj2 li .icon{
            width: 28px;
            height: 28px;
            display: block;
            background: url(./img/图标.png) no-repeat;
            background-size: 28px auto;
        }
        .gj2 li a .t2{
            background-position: 0 -28px;
        }
        .gj2 li a .t3{
            background-position: 0 -56px;
        }
        .gj2 li a .t4{
            background-position: 0 -84px;
        }
        .gj2 li a .t5{
            background-position: 0 -112px;
        }
        .gj2 li a .t6{
            background-position: 0 -140px;
        }
        .gj2 li a .t7{
            background-position: 0 -168px;
        }
        .gj2 li a .t8{
            background-position: 0 -196px;
        }
        .gj2 li a .t9{
            background-position: 0 -224px;
        }
        .gj2 li a .t10{
            background-position: 0 -252px;
        }
        .xia{
            width: 100%;
            height: 60px;
            box-sizing: border-box;
            border-top: 1px solid #c2c2c2;
            border-bottom: 1px solid #c2c2c2;
            display: flex;
        }
        .xia a{
            color: #333;
            font-size: 12px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .xia a img{
            width: 20px;
            height: 20px;
            display: block;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <div class="ss">
     <div class="kuang">
       搜索:目的地/酒店/景点/航班号
     </div>
     <a href="#" class="wode">我 的</a>
    </div>
    <div class="bj">
         <img src="./img/背景.jpg" alt="">
    </div>
    <div class="sdh">
    <ul class="jd">
       <li><a href="#"><span class="gl"></span><span>攻略·景点</span></a></li>
       <li><a href="#"><span class="mp"></span><span>门票·活动</span></a></li>
       <li><a href="#"><span class="m"></span><span>美食林</span></a></li>
       <li><a href="#"><span class="z"></span><span>周边游</span></a></li>
       <li><a href="#"><span class="y"></span><span>一日游</span></a></li>
    </ul>
    </div>
    <div class="k">
        <div class="gj">
        <div class="heng a">
          <div class="dian"><a  href="#"><span>酒店</span></a></div>
          <div class="dian"><a  href="#"><span>民宿·客栈</span></a></div>
          <div class="dian"><a  href="#"><span>特价·爆款</span></a></div>
        </div>
        <div class="heng b">
           <div class="dian"><a  href="#"><span>机票</span></a></div>
           <div class="dian"><a  href="#"><span>火车票</span></a></div>
           <div class="dian"><a  href="#"><span>汽车·船票</span></a></div>
           <div class="dian"><a  href="#"><span>专车·租车</span></a></div>
        </div>
        <div class="heng c">
            <div class="dian"><a  href="#"><span>旅游</span></a></div>
            <div class="dian"><a  href="#"><span>私家团</span></a></div>
            <div class="dian"><a  href="#"><span>邮轮游</span></a></div>
            <div class="dian"><a  href="#"><span>定制游</span></a></div>
        </div>
    </div>
    </div>
    <div class="tb">
        <ul class="gj2">
        <li><a href="#"><span class="icon t1"></span><span class="zi">自由行</span></a></li>
        <li><a href="#"><span class="icon t2"></span><span class="zi">WiFi电话卡</span></a></li>
        <li><a href="#"><span class="icon t3"></span><span class="zi">保险·签证</span></a></li>
        <li><a href="#"><span class="icon t4"></span><span class="zi">换钞·购物</span></a></li>
        <li><a href="#"><span class="icon t5"></span><span class="zi">向导·包车</span></a></li>
        <li><a href="#"><span class="icon t6"></span><span class="zi">特价机票</span></a></li>
        <li><a href="#"><span class="icon t7"></span><span class="zi">礼品盒</span></a></li>
        <li><a href="#"><span class="icon t8"></span><span class="zi">申卡·借钱</span></a></li>
        <li><a href="#"><span class="icon t9"></span><span class="zi">社区</span></a></li>
        <li><a href="#"><span class="icon t10"></span><span class="zi">更多</span></a></li>
        </ul>
    </div>
    <div class="xia">
        <a href="#" class="dh"><img src="./img/电话.png"><span>电话预定</span></a>
        <a href="#" class="dh"><img src="./img/下载.png"><span>下载客户端</span></a>
        <a href="#" class="dh"><img src="./img/我的.png"><span>我的</span></a>
    </div>
</body>
</html>